<template>
  <div class="dialog-wrap">
    <el-dialog :visible.sync="dialogVisible_jilian.show" center>
      <div class="show-title">标识ID：{{ sn_seled }}</div>
      <div class="show-title">
        级联类型：{{ io_type_seled == 0 ? "接入和发布" : io_type_seled == 1 ? "仅接入" : "仅发布" }}
      </div>
      <el-form
        :inline="true"
        :model="form2ruleform"
        ref="form2"
        :rules="form2rules"
        class="demo-form-inline form2"
      >
        <el-form-item label="级联类型" prop="io_type">
          <el-select v-model="form2ruleform.io_type" placeholder="请选择">
            <el-option label="接入和发布" :value="0"></el-option>
            <el-option label="仅接入" :value="1"></el-option>
            <el-option label="仅发布" :value="2"></el-option>
          </el-select>
           <el-button type="primary" size="small" @click="fnSubmit('form2')"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
export default {
  name: "jilian",
  props: {
    dialogVisible_jilian: {
      type: Object,
      default() {
        return {
          show: false,
        };
      },
    },
    sn: {
      type: String,
      default: "",
    },
   
    io_type: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      sn_seled: "",
      io_type_seled:0,
      form2ruleform: {
        io_type: "",
      },
      form2rules: {
        io_type: [{ required: false, message: "", trigger: "blur" }],
      },

    };
  },
  mounted() {
    this.io_type_seled = this.io_type
  },
  watch: {
    sn: {
      handler(newVal) {
        //console.log(newVal);
        this.sn_seled = newVal;
      },
      immediate: true,
    },
    io_type: {
      handler(newVal) {
       // console.log(newVal);
        this.io_type_seled = newVal;
      },
      deep:true,
      immediate: true,
    },
  },
  methods: {
    //修改状态
    fnSubmit(formName) {
      var that = this;
      let _io_type = this.form2ruleform.io_type;
      if (_io_type == 0) {
        this.fn_0();
      } else if (_io_type == 1) {
        this.fn_1();
      } else if (_io_type == 2) {
        this.fn_2();
      }
    },
    //接入和发布
    fn_0() {
      postData("/adminweb/host/update/iotype", {
        sn: this.sn_seled,
        io_type: 0,
      })
        .then((res) => {
          if (res.code == 0) {
            this.io_type_seled = 0;
            this.$message.success("已接入和发布");
            this.$emit("refreshList");
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //接入
    fn_1() {
      postData("/adminweb/host/update/iotype", {
        sn: this.sn_seled,
        io_type: 1,
      })
        .then((res) => {
          if (res.code == 0) {
            this.io_type_seled = 1;
            this.$message.success("已接入");
            this.$emit("refreshList");
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //发布
    fn_2() {
      postData("/adminweb/host/update/iotype", {
        sn: this.sn_seled,
        io_type: 2,
      })
        .then((res) => {
          if (res.code == 0) {
            this.io_type_seled = 2;
            this.$message.success("已发布");
            this.$emit("refreshList");
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
  },
};
</script>

<style scoped>
.dialog-wrap >>> .el-dialog {
  height: 600px;
  overflow-y: scroll;
}
.btn-group {
  margin: 10px 0;
}
.show-title {
  margin-bottom: 10px;
  font-weight: 600;
}
.dialog-wrap >>> .el-form--inline .el-form-item__label {
  display: block;
}
.dialog-wrap >>> .el-form-item {
  width: 100% !important;
  display: flex;
}

.dialog-wrap >>> .el-button {
  margin-left: 30px;
}
</style>
